<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>主页面</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="layui/layui.js"></script>
		<script type="text/javascript">
			var wsurl;
			layui.use('layer', function(){
							
			})	
			function getWsUrl(){
				layer.open({
					type : 1,
					btn : ['连接','关闭'],
					btnAlign: 'c',
					closeBtn : 2,
					anim : 3,
					content : $('.config'),
					yes:function(index){
						wsurl = $('#url').val();
						websocket = new WebSocket(wsurl); 
					    websocket.onopen = function(evt) { 
					    	layer.alert('连接成功！');
					    	layer.close(index);
					    }; 
					    websocket.onerror = function(evt) { 
					    	layer.alert('连接失败！');
					    }; 
					}
				})
			}			
		</script>
	</head>
	<body>
		<button onclick="getWsUrl();">Configuration</button>
		<div onclick="location='map.html?url='+wsurl">
			<img alt="" src="images/map.png">
			<p>构建地图</p>		
		</div>
		<div onclick="location='automatic.html?url='+wsurl">
			<img alt="" src="images/automatic.png">
			<p>自主导航</p>
		</div>
		<div onclick="location='parts.html'">
			<img alt="" src="images/parts.png">
			<p>配件功能</p>
		</div>
		<div onclick="location='yunnan.html'">
			<img alt="" src="images/yunnan.png">
			<p>云台控制</p>
		</div>
		<div onclick="location='aiIntelligence.html'">
			<img alt="" src="images/aiIntelligence.png">
			<p>智能问答<br>图像识别</p>
		</div>
		<div onclick="location='other.html'">
			<img alt="" src="images/other.png">
			<p>其他</p>
		</div>
		<div class = 'config' hidden>
			<h2>Configuration</h2>
			<span>Connection</span><input type="text" value="ws://localhost:9090" id = 'url'>
		</div>
	</body>
</html>
